<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('全国薪资列表')"/>
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/echarts2.min.js}"></script>
    <script th:src="@{/js/echarts-wordcloud.min.js}"></script>
    <title>福利测试页面</title>
</head>
<body style="background-color:#f3f3f4 ">
<div class="container" style="width: 97%;margin-top: 10px">
    <div class="row">
        <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%">
            <div style="height: 50px;font-size: 20px;line-height: 60px;">职业福利</div>
            <hr style="margin: 0px">
            <div id="finance_one" style="height: 550px;margin:10px"></div>
        </div>
        <div class="col-sm-6"  style="margin:1%;background-color: white;width: 48%" >
            <div style="height: 50px;font-size: 20px;line-height: 60px;">公司福利</div>
            <hr style="margin: 0px">
            <div id="finance_two" style="height: 550px;margin:10px"></div>

        </div>
    </div>
</div>
<script>
    var chartDom1 = document.getElementById('finance_one');
    var myChart1 = echarts.init(chartDom1);

    option = {
        title: {
            // text: '热点分析',
            link: 'https://www.baidu.com/s?wd=' + encodeURIComponent('ECharts'),
            x: 'center',
            textStyle: {
                fontSize: 23
            }

        },
        // backgroundColor: '#F7F7F7',
        tooltip: {
            show: true
        },
        toolbox: {
            feature: {
                saveAsImage: {
                    iconStyle: {
                        normal: {
                            color: '#FFFFFF'
                        }
                    }
                }
            }
        },
        series: [{
            name: '热点分析',
            type: 'wordCloud',
            //size: ['9%', '99%'],
            sizeRange: [6, 66],
            //textRotation: [0, 45, 90, -45],
            rotationRange: [-45, 90],
            //shape: 'circle',
            textPadding: 0,
            autoSize: {
                enable: true,
                minSize: 6
            },
            textStyle: {
                normal: {
                    color: function () {
                        return 'rgb(' + [
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160),
                            Math.round(Math.random() * 160)
                        ].join(',') + ')';
                    }
                },
                emphasis: {
                    shadowBlur: 10,
                    shadowColor: '#333'
                }
            },
            data: [{
                name: "Jayfee",
                value: 666
            }, {
                name: "Nancy",
                value: 520
            }]
        }]
    };

    var JosnList = [];

    JosnList.push({
        name: "房屋安全",
        value: "223"
    }, {
        name: "文化活动",
        value: "223"
    }, {
        name: "拆迁管理",
        value: "223"
    }, {
        name: "公共设施",
        value: "223"
    }, {
        name: "供气质量",
        value: "223"
    }, {
        name: "供电管理",
        value: "223"
    }, {
        name: "燃气管理",
        value: "152"
    }, {
        name: "教育管理",
        value: "152"
    }, {
        name: "医疗纠纷",
        value: "152"
    }, {
        name: "执法监督",
        value: "152"
    }, {
        name: "设备安全",
        value: "152"
    }, {
        name: "政务建设",
        value: "152"
    }, {
        name: "县区、开发区",
        value: "152"
    }, {
        name: "宏观经济",
        value: "152"
    }, {
        name: "教育管理",
        value: "112"
    }, {
        name: "社会保障",
        value: "112"
    }, {
        name: "生活用水管理",
        value: "112"
    }, {
        name: "物业服务与管理",
        value: "112"
    }, {
        name: "分类列表",
        value: "112"
    }, {
        name: "农业生产",
        value: "112"
    }, {
        name: "二次供水问题",
        value: "112"
    }, {
        name: "城市公共设施",
        value: "92"
    }, {
        name: "拆迁政策咨询",
        value: "92"
    }, {
        name: "物业服务",
        value: "92"
    }, {
        name: "物业管理",
        value: "92"
    }, {
        name: "社会保障保险管理",
        value: "92"
    }, {
        name: "低保管理",
        value: "92"
    }, {
        name: "文娱市场管理",
        value: "72"
    }, {
        name: "城市交通秩序管理",
        value: "72"
    }, {
        name: "执法争议",
        value: "72"
    }, {
        name: "商业烟尘污染",
        value: "72"
    }, {
        name: "占道堆放",
        value: "71"
    }, {
        name: "地上设施",
        value: "71"
    }, {
        name: "水质",
        value: "71"
    }, {
        name: "无水",
        value: "71"
    }, {
        name: "供热单位影响",
        value: "71"
    }, {
        name: "人行道管理",
        value: "71"
    }, {
        name: "主网原因",
        value: "71"
    }, {
        name: "集中供热",
        value: "71"
    }, {
        name: "客运管理",
        value: "71"
    }, {
        name: "国有公交（大巴）管理",
        value: "71"
    }, {
        name: "工业粉尘污染",
        value: "71"
    }, {
        name: "治安案件",
        value: "71"
    }, {
        name: "压力容器安全",
        value: "71"
    }, {
        name: "职业教育",
        value: "21"
    }, {
        name: "物业资质管理",
        value: "21"
    }, {
        name: "拆迁补偿",
        value: "21"
    }, {
        name: "设施维护",
        value: "21"
    }, {
        name: "市场外溢",
        value: "11"
    }, {
        name: "占道经营",
        value: "11"
    }, {
        name: "树木管理",
        value: "11"
    }, {
        name: "农村基础设施",
        value: "11"
    }, {
        name: "无水",
        value: "11"
    }, {
        name: "供气质量",
        value: "11"
    }, {
        name: "停气",
        value: "11"
    }, {
        name: "市政府工作部门（含部门管理机构、直属单位）",
        value: "11"
    }, {
        name: "燃气管理",
        value: "11"
    }, {
        name: "市容环卫",
        value: "11"
    }, {
        name: "新闻传媒",
        value: "11"
    }, {
        name: "人才招聘",
        value: "11"
    }, {
        name: "市场环境",
        value: "11"
    }, {
        name: "行政事业收费",
        value: "11"
    }, {
        name: "食品安全与卫生",
        value: "11"
    }, {
        name: "城市交通",
        value: "11"
    }, {
        name: "房地产开发",
        value: "11"
    }, {
        name: "房屋配套问题",
        value: "11"
    }, {
        name: "物业服务",
        value: "11"
    }, {
        name: "物业管理",
        value: "11"
    }, {
        name: "占道",
        value: "11"
    }, {
        name: "园林绿化",
        value: "11"
    }, {
        name: "户籍管理及身份证",
        value: "11"
    }, {
        name: "公交运输管理",
        value: "11"
    }, {
        name: "公路（水路）交通",
        value: "11"
    }, {
        name: "房屋与图纸不符",
        value: "11"
    }, {
        name: "有线电视",
        value: "11"
    }, {
        name: "社会治安",
        value: "11"
    }, {
        name: "林业资源",
        value: "11"
    }, {
        name: "其他行政事业收费",
        value: "11"
    }, {
        name: "经营性收费",
        value: "11"
    }, {
        name: "食品安全与卫生",
        value: "11"
    }, {
        name: "一次供水问题",
        value: "11"
    });

    option.series[0].data = JosnList;


    //myChart.setOption(option);
    // myChart.on('click', function (params) {
    //     //alert((params.name));
    //     window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(params.name));

    // });

    option && myChart1.setOption(option);


    var chartDom2 = document.getElementById('finance_two');
    var myChart2 = echarts.init(chartDom2);

    const list = [
        {
            value: '50',
            name: '五险一金',
            textStyle: {
                shadowBlur: 4,
                shadowColor: '#ECEFFF',
                shadowOffsetY: 14,
                color: '#73DDFF',
            },
        }, // 50
        // 五险一金，定期体检，全勤奖，年终奖，带薪年假，
        // 餐补，交通补助，节日福利，零食下午茶，生日福利，团建聚餐，周年礼物
        { value: '30', name: '补充医疗保险' },
        { value: '29', name: '定期体检' },
        { value: '28', name: '全勤奖' },
        { value: '27', name: '年终奖' },
        { value: '26', name: '带薪年假' },
        { value: '25', name: '交通补助' },
        { value: '24', name: '餐补' },
        { value: '23', name: '节日福利' },
        { value: '22', name: '零食下午茶' },
        { value: '21', name: '生日福利' },
        { value: '20', name: '团建聚餐' },
        { value: '16', name: '周年礼物' },
        { value: '15', name: '免费班车' },
        { value: '14', name: '加班补助' },
        { value: '13', name: '底薪加提成' },
        { value: '12', name: '员工旅游' },
        { value: '11', name: '补充医疗保险' },
        { value: '10', name: '绩点将近' },
        { value: '9', name: '双休' },
    ]
    option = {
        tooltip: {
            show: true,
            borderColor: '#fe9a8bb3',
            borderWidth: 1,
            padding: [10, 15, 10, 15],
            confine: true,
            backgroundColor: 'rgba(255, 255, 255, .9)',
            textStyle: {
                color: 'hotpink',
                lineHeight: 22
            },
            extraCssText: 'box-shadow: 0 4px 20px -4px rgba(199, 206, 215, .7);border-radius: 4px;'
        },
        series: [
            {
                type: 'wordCloud',
                // The shape of the "cloud" to draw. Can be any polar equation represented as a
                // callback function, or a keyword present. Available presents are circle (default),
                // cardioid (apple or heart shape curve, the most known polar equation), diamond (
                // alias of square), triangle-forward, triangle, (alias of triangle-upright, pentagon, and star.

                shape: 'pentagon',

                // A silhouette image which the white area will be excluded from drawing texts.
                // The shape option will continue to apply as the shape of the cloud to grow.

                // Folllowing left/top/width/height/right/bottom are used for positioning the word cloud
                // Default to be put in the center and has 75% x 80% size.

                left: 'center',
                top: 'center',
                width: '100%',
                height: '100%',
                right: null,
                bottom: null,

                // Text size range which the value in data will be mapped to.
                // Default to have minimum 12px and maximum 60px size.

                sizeRange: [14, 50],

                // Text rotation range and step in degree. Text will be rotated randomly in range [-90, 90] by rotationStep 45

                rotationRange: [0, 0],
                rotationStep: 0,

                // size of the grid in pixels for marking the availability of the canvas
                // the larger the grid size, the bigger the gap between words.

                gridSize: 25,

                // set to true to allow word being draw partly outside of the canvas.
                // Allow word bigger than the size of the canvas to be drawn
                drawOutOfBound: false,

                // If perform layout animation.
                // NOTE disable it will lead to UI blocking when there is lots of words.
                layoutAnimation: true,

                // Global text style
                textStyle: {
                    fontFamily: 'PingFangSC-Semibold',
                    fontWeight: 600,
                    color: function (params) {
                        let colors = ['#fe9a8bb3', '#fe9a8bb3', '#fe9a8b03', '#9E87FFb3', '#9E87FFb3', '#9E87FFb3', '#fe9a8bb3', '#fe9a8bb3', '#fe9a8bb3', '#73DDFF', '#58D5FF']
                        return colors[parseInt(Math.random() * 10)];
                    },
                },
                emphasis: {
                    focus: 'none',
                },

                // Data is an array. Each array item must have name and value property.
                data: list,
            },
        ],
    };


    option && myChart2.setOption(option);


</script>
</body>
</html>